<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型内边距和外边距边距传递(Box model inner padding and margin edge transfer)</title>
  <!-- 
    CSS的盒子模型中，内边距（Padding）和外边距（Margin）是两个重要的概念，它们可以通过调整来影响元素的布局和外观。在某些情况下，内边距和外边距的设置可能会影响元素的尺寸和位置。
    以下是关于内边距和外边距在盒子模型中的相互影响的总结： 
      
      1. 内边距（Padding）： 
      - 内边距是指内容区域与边框之间的距离，可以通过padding属性来设置。 
      - 当给元素添加内边距时，元素的内容区域会减小，内边距会在内容和边框之间创建空白区域。 
      2. 外边距（Margin）： 
      - 外边距是指元素与周围元素之间的距离，可以通过margin属性来设置。 
      - 当给元素添加外边距时，元素与周围元素之间的距离会增加，影响元素在页面中的位置和间距。 
 
    当同时设置内边距和外边距时，它们之间的关系可以影响元素的最终尺寸和位置。
    例如，如果给一个元素同时设置了内边距和外边距，内边距会影响元素的内容区域大小，而外边距会影响元素与周围元素的距离。
    因此，在设计页面布局时，需要谨慎调整内边距和外边距的数值，以达到所需的效果。 
   -->
  <style>
    /* 内边距会影响元素的宽度和高度 */
    .container-padding {
      width: 240px;
      /* height: 100px; */
      background-color: skyblue;
    }

    .padding {
      width: 80px;
      height: 80px;
      background-color: seagreen;
      padding: 20px;
    }

    /* 外边距不会影响元素的宽度和高度，但会影响元素的位置 */
    .container-margin {
      width: 240px;
      /* height: 100px; */
      background-color: skyblue;
    }

    .margin {
      width: 80px;
      height: 80px;
      background-color: seagreen;
      margin: 20px;
    }

    /* margin-top会被重叠 */
    .bottom {
      margin-top: 10px;
    }

    /* margin传递: .bottom {margin-top}不会被重叠, overflow: auto触发BFC */
    .container-transmit-margin {
      width: 240px;
      background-color: skyblue;

      overflow: auto;
    }

    .transmit-margin {
      width: 80px;
      height: 80px;
      background-color: seagreen;
      margin: 20px;
    }
  </style>
</head>

<body>

  <div>header</div>
  <div class="container-padding">
    <div class="padding"></div>
  </div>
  <div>container-padding</div>

  <div class="container-margin">
    <div class="margin"></div>
  </div>
  <div class="bottom">container-margin</div>

  <!-- margin传递 -->
  <div class="container-transmit-margin">
    <div class="transmit-margin"></div>
  </div>
  <div class="bottom">container-transmit-margin</div>

</body>

</html>